<template>
  <div class="login-content">
    <div class="login_box">
      <div class="close" @click="close">
        <!-- <img src="image/取消.png" alt="" style="width: 30px; height: 30px" /> -->
        <Svgs ids="#icon-cuowu" style="font-size: 26px"></Svgs>
      </div>
      <div id="loginUser" class="login_form">
        <div class="login_title">登录 <span></span></div>
        <div class="form_text_ipt">
          <el-input
            :placeholder="userPlaceholder"
            show="isshowusername"
            name="username"
            v-model="username"
            clearable
            @blur="userBlur"
          >
          </el-input>
        </div>
        <div class="ececk_warning" v-show="isshowusername">
          <span>用户名/手机号不能为空</span>
        </div>
        <div class="form_text_ipt" style="box-shadow: none">
          <el-input
            :placeholder="passwordPlaceholder"
            show="isshowpassword"
            name="password"
            v-model="password"
            show-password
            @blur="userBlur"
          ></el-input>
        </div>
        <div class="ececk_warning" v-show="isshowpassword">
          <span>密码不能为空</span>
        </div>
        <div class="form_check_ipt">
          <div class="left check_left">
            <label><input name="" type="checkbox" v-model="autoLogin" /> 下次自动登录</label>
          </div>
          <div class="right check_right"><a href="#">忘记密码</a></div>
        </div>
        <div class="form_btn">
          <button type="button" @click="submit">登录</button>
        </div>
        <div id="toregister" class="form_reg_btn">
          <span>还没有帐号？</span
          ><router-link to="/toregister" replace>马上注册</router-link>
        </div>
        <div class="other_login">
          <div class="left other_left"><span>其它登录方式</span></div>
          <div class="right other_right">
            <a href="#"><i class="fa fa-qq fa-2x"></i></a>
            <a href="#"><i class="fa fa-weixin fa-2x"></i></a>
            <a href="#"><i class="fa fa-weibo fa-2x"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Svgs from "@/components/svg/svg.vue";
import pubsub from "pubsub-js";
import md5 from "js-md5";
import axios from "axios";
export default {
  name: "Login",
  components: {
    Svgs,
  },
  data() {
    return {
      input: "",
      userPlaceholder: "手机号/邮箱/用户名",
      passwordPlaceholder: "请输入密码",
      isshowusername: false, //是否显示提示数据
      isshowpassword: false,
      username: "", //用户账号
      password: "", //用户密码
      autoLogin:false,
      md5salt: "1a2b3c4c", //加密的盐
    };
  },
  methods: {
    close() {
      //发布信息
      pubsub.publish("leave", false);
    },
    userBlur(e) {
      //用户账号或密码失去焦点触发
      if (
        e.target.value == null ||
        typeof e.target.value == "undefined" ||
        e.target.value == ""
      ) {
        if (e.target.name == 'username') {
          this.isshowusername = true;
        } else if (e.target.name == 'password') {
          this.isshowpassword = true;
        }
        // this.showname = true;
      }else{
         if (e.target.name == 'username') {
          this.isshowusername = false;
        } else if (e.target.name == 'password') {
          this.isshowpassword = false;
        }
      }
    },
    submit() {
      if (
        this.username == null ||
        typeof this.username == "undefined" ||
        this.username == ""
      ) {
        this.open4("账号不能为空");
      } else if (
        this.password == null ||
        typeof this.password == "undefined" ||
        this.password == ""
      ) {
        this.open4("用户密码不能为空");
      } else {
        //判断通过,发送axios请求
        let str =
          "" +
          this.md5salt.charAt(0) +
          this.md5salt.charAt(2) +
          this.password +
          this.md5salt.charAt(5) +
          this.md5salt.charAt(4);
        let pass = md5(str);
        const that = this;
        console.log(this.autoLogin)
        axios({
          method: "post",
          url: "/aabbcc/user/login",
          data: {
            username: this.username,
            password: pass,
            autoLogin:that.autoLogin
          },
        })
          .then(function (response) {
            if (response.data.code == 401) {
              that.open4(response.data.obj);
            }
            if (response.data.code == 200) {
              that.open2(response.data.massage);
              //设置浏览器的localstorage
              localStorage.setItem("token",response.data.obj.token)
              localStorage.setItem("tokenTime",response.data.obj.tokentime)
              //提交修改
              that.$store.commit("handlerUser", {
                userInfo: response.data.obj.user,

              });
              //发布信息到top
                    pubsub.publish("usersinfo",response.data.obj.user.userId)
              //通知app.vue启动定时器
              pubsub.publish("startTimer","")

               //判断是否修改地址 true则通知天气系统查询信息
                      if(response.data.obj.user.userAddress=="" || response.data.obj.user.userAddress==null||typeof response.data.obj.user.userAddress=="undefined"){
                            //通知天气查询信息
                            pubsub.publish("selectWeachers","北京")
                      }else{
                           //通知天气查询信息
                         const addres = response.data.obj.user.userAddress;
                         //按照，拆分
                         var caiadd = addres.split(",");
                         //获取最终地区名
                         var endAddress = caiadd[2].substring(0,caiadd[2].length-1)
                            pubsub.publish("selectWeachers",endAddress)
                      }
              setTimeout(() => {
                    that.$router.push({name:'home'})
              }, 2000);
              

            }else{
              that.open4(response.data.massage);
            }
          })
          .catch(function () {
            // that.open4("抱歉，登录异常");
          });
      }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
.login-content {
  width: 100%;
  height: 100%;
  position: relative;
}
.login_box {
  border-radius: 0 20px 20px 0;
  width: 100%;
  background: #ffffff;
}
.close {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
.login_div img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border: 0;
}

.login_title {
  font-size: 25px;
  text-align: center;
  color: #ff7f50;
  padding: 15px 0;
  width: 300px;
  margin: 0 auto;
  border-bottom: solid 1px #cccccc;
  position: relative;
}
.login_title span {
  width: 100%;
  height: 2px;
  background: #ff7f50;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transition: all 0.5s linear;
  opacity: 0;
}
.login_title:hover span {
  transform: scaleX(1);
  transition: all 0.5s linear;
  opacity: 1;
}
.form_text_ipt {
  width: 300px;
  height: 40px;

  margin: 20px auto 0 auto;
  background: #ffffff;
}
.ececk_warning {
  font-size: 13px;
  color: red;
  width: 300px;
  margin: 0 auto;
}
.form_check_ipt {
  width: 300px;
  margin: 10px auto;
  overflow: hidden;
}
.left {
  float: left;
}
.check_left label {
  cursor: pointer;
}
.check_left label input {
  position: relative;
  top: 2px;
}
input {
  font-family: 微软雅黑, MicrosoftYaHei;
  font-size: 14px;
  outline: none medium;
}
.right {
  float: right;
}
a {
  text-decoration: none;
  color: #3cf;
  -webkit-tap-highlight-color: transparent;
}
.form_btn {
  width: 300px;
  height: 40px;
  margin: 10px auto;
}
.form_btn button {
  width: 100%;
  height: 100%;
  border: none;
  color: #ffffff;
  font-size: 14px;
  background: #ff7f50;
  cursor: pointer;
}
.form_reg_btn {
  width: 300px;
  margin: 0 auto;
  font-size: 14px;
  color: #666;
}
.other_login {
  overflow: hidden;
  width: 300px;
  height: 80px;
  line-height: 80px;
  margin: 0px auto;
}
.left {
  float: left;
}
.other_left {
  font-size: 14px;
  color: #999;
}
.other_right a {
  margin: 5px;
  color: #636363;
}
</style>